import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Dimensions,
    TouchableOpacity,
    Image,
    Animated,
    Platform
} from 'react-native';
import Constant from '../../utils/Constant'
import AndroidModule from '../../utils/AndroidConnent'

const screenH = Dimensions.get('window').height;

const isIos = Platform.OS == 'ios';


//订单状态
export const SharePlatForm = {
    SharePlatFormWeChatSession: 1, //微信好友
    SharePlatFormWeChatTimeline: 2,//微信朋友圈
    SharePlatFormWeChatEnt: 3, //企业微信
    SharePlatFormImages: 4, //多图分享

};

export default class BottomShareDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            sharePlatForms: this.props.sharePlatForms ? this.props.sharePlatForms : [
                SharePlatForm.SharePlatFormWeChatSession,
                SharePlatForm.SharePlatFormWeChatTimeline,
                SharePlatForm.SharePlatFormWeChatEnt,
                SharePlatForm.SharePlatFormImages,
            ],
            modalAnimation: new Animated.Value(0),
        }
    };

    componentDidMount() {
        if (this.props.visible) {
            this.animateIn();
        }

        if (isIos) {
            AndroidModule.isWxAppInstall({}, (error, result) => {
                let isWxAppInstall = result.isWxAppInstall
                if (!isWxAppInstall) {
                    const newArray = this.state.sharePlatForms.filter(item => item !== SharePlatForm.SharePlatFormWeChatSession && item !== SharePlatForm.SharePlatFormWeChatTimeline);
                    this.setState({
                        sharePlatForms: newArray
                    })
                }
            })

            AndroidModule.isWxWorkAppInstall({}, (error, result) => {
                let isWxWorkAppInstall = result.isWxWorkAppInstall
                if (!isWxWorkAppInstall) {
                    const newArray = this.state.sharePlatForms.filter(item => item !== SharePlatForm.SharePlatFormWeChatEnt);
                    this.setState({
                        sharePlatForms: newArray
                    })
                }
            })
        }
    }

    componentDidUpdate(prevProps) {
        if (this.props.visible && !prevProps.visible) {
            this.animateIn();
        } else if (!this.props.visible && prevProps.visible) {
            this.animateOut();
        }
    }

    animateIn = () => {
        Animated.timing(this.state.modalAnimation, {
            toValue: 1,
            duration: 300,
            useNativeDriver: true,
        }).start();
    };

    animateOut = () => {
        Animated.timing(this.state.modalAnimation, {
            toValue: 0,
            duration: 300,
            useNativeDriver: true,
        }).start();
    };

    render() {
        const translateY = this.state.modalAnimation.interpolate({
            inputRange: [0, 1],
            outputRange: [screenH, 0],
        });
        return (
            <View style={styles.container}>
                < TouchableOpacity
                    activeOpacity={1}
                    style={{ flex: 1 }}
                    onPress={() => {
                        if (this.props.onClose) {
                            this.props.onClose()
                        }
                    }} />
                <Animated.View
                    style={[
                        styles.framebox,
                        { transform: [{ translateY }] }
                    ]}
                >
                    <Text style={styles.topText}>请选择分享平台</Text>

                    <View style={{ flexDirection: 'row', marginBottom: 10 }}>
                        {
                            this.state.sharePlatForms.map((platform) => {
                                return (
                                    <TouchableOpacity
                                        style={styles.itemShareContainer}
                                        onPress={() => {
                                            this.props.shareResult(platform)
                                            this.props.onClose()
                                        }}>
                                        <Image style={styles.shareIcon} source={this.platformIcon(platform)}></Image>
                                        <Text style={styles.titleText}>{this.platformName(platform)}</Text>
                                    </TouchableOpacity>
                                )
                            })
                        }
                    </View>

                    <View style={{ height: 10, backgroundColor: '#f6f6f6', width: '100%', marginTop: 10 }}></View>

                    <View style={{ width: '100%', height: this.props.isRoot ? 49 : Constant.bottomHeight + 49 }}>
                        <TouchableOpacity
                            style={styles.cancelBtn}
                            onPress={() => { this.props.onClose() }}>
                            <Text style={styles.cancelText}>取消</Text>
                        </TouchableOpacity>
                    </View>
                </Animated.View>

            </View>
        );

    }



    platformName(platform) {
        let platformName = ''
        if (platform == SharePlatForm.SharePlatFormWeChatSession) {
            platformName = '微信'
        } else if (platform == SharePlatForm.SharePlatFormWeChatTimeline) {
            platformName = '朋友圈'
        } else if (platform == SharePlatForm.SharePlatFormWeChatEnt) {
            platformName = '企微'
        } else {
            platformName = '保存本地'
        }
        return platformName
    }

    platformIcon(platform) {
        if (platform == SharePlatForm.SharePlatFormWeChatSession) {
            return require('source/image/car/ic_share_wechat.png')
        } else if (platform == SharePlatForm.SharePlatFormWeChatTimeline) {
            return require('source/image/car/ic_share_circle.png')
        } else if (platform == SharePlatForm.SharePlatFormWeChatEnt) {
            return require('source/image/car/icon_wwx_share.png')
        } else {
            return require('source/image/car/ic_save_local.png')
        }
    }

    sure = () => {
        if (this.props.sureAction) {
            this.props.sureAction();
        }
    }

    cancel = () => {
        if (this.props.cancelAction) {
            this.props.cancelAction();
        }
    }

    // 弹框中间内容部分
    getcontainer = () => {
        return (
            <View style={styles.noticebox}>
                <Text style={styles.noticedes}>{this.props.notice}</Text>
            </View>
        )
    }

    componentWillMount() {

    }

}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        top: 0,
        bottom: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.5)',
        flexDirection: 'column',
        justifyContent: 'flex-end'
    },
    framebox: {
        width: '100%',
        backgroundColor: '#ffffff',
        alignItems: 'center',
    },
    itemShareContainer: {
        flex: 1,

        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',

    },
    titleText: {
        marginTop: 10,
        color: '#333',
        fontSize: 14
    },
    shareIcon: {
        width: 30,
        height: 30,
        resizeMode: 'contain'
    },
    topText: {
        padding: 20,
        color: '#333333',
        fontWeight: '500',
        fontSize: 16,
        textAlign: 'center'
    },
    cancelBtn: {
        width: '100%',
        height: 49,
        justifyContent: 'center',
        alignItems: 'center'
    },
    cancelText: {
        fontSize: 16,
        fontWeight: '500',
        color: '#333'
    }
});
